<template>
  <div class="container">
    <div class="commentFollow">
      <div class="user-comment">
        <img src="/static/image/u80.png">
        <div class="center">
          <p>{{commentItem.user.nickname}}</p>
          <i>2小时前</i>
        </div>
        <input @click="sendToDetail" type="button" value="回复">
      </div>
      <floor @reply="sendToDetail" v-if="commentItem.parent" :floorItem="commentItem.parent" :parentLength="parentLength"></floor>
      <div class="user-content">
        {{commentItem.content}}
      </div>
    </div>
  </div>
</template>

<script>
import Floor from '@/commonComponent/floor'
export default {
  props: ['commentItem'],
  data() {
    return {
      isActive: true
    }
  },
  components: {
    Floor
  },
  methods: {
    sendToDetail(data) {
      if (data.id) {
        this.$emit('sendToDetail', data)
        isActive: this.isActive
      } else {
        this.$emit('sendToDetail', {
          id: this.commentItem.id,
          isActive: this.isActive
        })
      }

    },
    getParentLength(num, obj) {
      if (obj.parent) {
        return this.getParentLength(num + 1, obj.parent)
      } else {
        return num
      }
    }
  },
  computed: {
    parentLength() {
      return this.getParentLength(0, this.commentItem)
    }
  }
}
</script>

<style scoped lang="less">
.commentFollow {
  padding: 5vw 5vw;
  border-bottom: 1px solid #d8d8d8;
  .user-comment {
    display: flex;
    justify-content: space-between;
    // flex-direction: column;
    align-items: center;
    margin-bottom: 5vw;
    img {
      width: 10vw;
    }
    .center {
      flex: 1;
      margin-left: 4vw;
      line-height: 6vw;

      p {
        font-size: 4.5vw;
      }
      i {
        font-size: 3.8vw;
        color: #adadad;
      }
    }
    input {
      border: none;
      outline: none;
      background: #d8d8d8;
      padding: 1.5vw 1.5vw;
      border-radius: 1vw;
      color: #8a8a8a;
    }
  }
  .user-content {
    margin-top: 6vw;
  }
}
</style>
